<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>模拟 mouse trigger menubutton</title>
<link href="../assets/nav-mouse.css" rel="stylesheet"/>
</head>
<body>
<h1 style="text-align: center;">
    模拟 mouse trigger menubutton
</h1>
<div id="context" style="width: 500px;margin:50px auto;">

</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    KISSY.use("menu,separator", function (S, Menu,Separator) {
        var context = S.all("#context"), b, bb;
        (function () {

            var sb = new Menu.PopupMenu({
                prefixCls:"nav-",
                // boolean，是否鼠标脱离菜单后自动隐藏全部下拉菜单
                autoHideOnMouseLeave:true,
                width:150,
                align:{
                    offset:[-1, -1],
                    points:['bl', 'tl']
                }
            });

            sb.addChild(new Menu.Item({
                prefixCls:"nav-",
                content:"<a>我要买</a>"}));
            sb.addChild(new Menu.Item({
                prefixCls:"nav-",
                content:"<a>我要卖</a>"}));

            sb.addChild(new Separator({
                prefixCls:"nav-"
            }));

            var sb2 = new Menu.PopupMenu({
                prefixCls:"nav-",
                width:90,
                // boolean，是否鼠标脱离菜单后自动隐藏全部下拉菜单
                // autoHideOnMouseLeave:true,
                children:[
                    new Menu.Item({
                        prefixCls:"nav-",
                        content:"<a>旺铺</a>"})
                ],
                // bug elStyle 无效
                elStyle:{
                    color:"red"
                }
            });

            sb2.addChild(new Menu.Item({
                prefixCls:"nav-",
                content:"<a>装修</a>"}));

            var b2 = new Menu.SubMenu({
                prefixCls:"nav-",
                content:"<a>卖家中心</a>",
                menu:sb2
            });

            sb.addChild(b2);

            b = new Menu.SubMenu({
                prefixCls:"nav-",
                content:"<span class='title' style='width:58px'>淘宝网</span>",
                menu:sb
            });

        })();

        var menu = new Menu({
            prefixCls:"nav-",
            width:90,
            elCls:"horizonal",
            render:'#context',
            children:[b]
        });

        menu.render();

        menu.on("click", function (e) {
            alert(e.target.get("content"));
        });
    });
</script>
</body>
</html>